import styles from './styles.less';
import {Pagination, Table, Tag} from 'antd';
import {useCallback, useEffect, useState} from 'react';

import {connect} from 'umi';
import {nowrapColumns} from "@/utils/utils";

const DataTable = (props) => {
  const {dispatch, dataTable, loading} = props;
  const {record, tablePayload, setTablePayload} = props.data;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  /* 获取列表 */
  const fetchList = useCallback((payload) => {
    dispatch({
      type: 'POperationCouponRecord/fetchLinkRecord',
      payload: payload,
    });
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    fetchList({
      ...tablePayload, param: {
        ...tablePayload.param,
        couponId: record && record.data ? record.data.id : undefined
      }
    });
  }, [fetchList, tablePayload, record]);

  const columns = [
    {
      title: '序号',
      width: 70,
      align: 'center',
      render: ({}, {}, index) => (
        <span>
          {(tablePayload.pageNum - 1) * tablePayload.pageSize + index + 1}
        </span>
      ),
    },
    {
      title: '领取用户',
      dataIndex: 'userName',
      align: 'center',
      ellipsis: true
    },
    {
      title: '用户手机',
      dataIndex: 'mobile',
      align: 'center',
      ellipsis: true,
      render: (_, record) => {
        return (
          <span>
            {record.userInfo && record.userInfo.mobile ? record.userInfo.mobile : '-'}
          </span>
        );
      },
    },
    {
      title: '领取时间',
      dataIndex: 'createTime',
      align: 'center'
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      render: (_, record) => {
        return (
            <Tag color={record.status === '0' ? 'geekblue' : 'volcano'}>
              {record.status === '0' ? '未使用' : ''}
              {record.status === '1' ? '已使用' : ''}
              {record.status === '2' ? '已过期' : ''}
            </Tag>
        );
      },
    },
    {
      title: '使用时间',
      dataIndex: 'verifyTime',
      align: 'center'
    },
    {
      title: '核销店铺',
      dataIndex: 'mchName',
      align: 'center'
    },
    {
      title: '核销人',
      dataIndex: 'verifyNickname',
      align: 'center'
    },
  ];

  return (
    <>
      <div className={styles.myDataTable}>
        <Table
          rowSelection={{
            selectedRowKeys,
            onChange: (newSelectedRowKeys) => setSelectedRowKeys(newSelectedRowKeys),
          }}
          className={styles.myTable} bordered={false} size={'middle'}
          columns={nowrapColumns(columns, dataTable.list)}
          dataSource={dataTable.list} rowKey={'id'}
          pagination={false} scroll={{y: '100%'}} loading={loading}
        />
      </div>
      <Pagination
        pageSize={tablePayload.pageSize} current={tablePayload.pageNum} total={dataTable.total}
        className={styles.myPagination} size={'default'} hideOnSinglePage={false}
        showTotal={(total) => {
          return `共 ${total} 条记录`;
        }}
        pageSizeOptions={[10, 30, 60, 120]}
        showSizeChanger showQuickJumper={true}
        onChange={(page, pageSize) => {
          setTablePayload({...tablePayload, pageNum: page, pageSize: pageSize});
        }}
      />
    </>

  );
};

export default connect(({loading, POperationCouponRecord}) => {
  return {
    loading: loading.effects['POperationCouponRecord/fetchLinkRecord'],
    dataTable: POperationCouponRecord.dataTable,
  };
})(DataTable);
